<template>
  <div class="user-manage">
    <search-area @search-click="searchHandle" @reset-click="resetHandler" />
    <user-list ref="contentRef" @add-user="addUserHandle" />
    <add-user-modal ref="addUserModalRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SearchArea from './childs/search-area.vue';
import UserList from './childs/user-list.vue';
import AddUserModal from './childs/add-user-modal.vue';

const contentRef = ref<InstanceType<typeof UserList>>()
function searchHandle(formData: any) {
  // 调用子组件的查询接口
  contentRef.value?.fetchListData(formData)
}

function resetHandler() {
  // 调用子组件的查询接口
  contentRef.value?.fetchListData()
}

const addUserModalRef = ref<InstanceType<typeof AddUserModal>>()
function addUserHandle() {
  addUserModalRef.value?.openDialog()
}
</script>
<style scoped lang="less">
.user-manage {}
</style>
